<div *ngIf="incidents">
    <div class="d-flex align-items-center">
        <img [attr.src]="incidentIconPath" class="incident-icon mr-3" />
        <h3 class="mb-0">{{ incidents.name }}</h3>
    </div>

    <div class="d-flex flex-row align-items-stretch mt-2 shadow">
        <div class="card w-50 left-card">
            <div class="card-body">
                <h5>Highest Controversy Level</h5>

                <div class="d-flex align-items-center pb-2">
                    <div class="mr-auto">
                        <img [attr.src]="'/assets/icons-svg/icon-cat'+incidents.answerCategory+'.svg'" class="controversy-icon-lg" /> {{ incidents.eventSeverity }}
                    </div>
                    <div *ngIf="incidents.outlookAssessment && incidents.outlookAssessment != null" class="ml-auto">
                        Outlook
                        <strong>{{ highestIncidentOutlookAssessment }}</strong>
                        <img [attr.src]="'/assets/icons-svg/icon-outlook-'+highestIncidentOutlookAssessment.toLowerCase()+'.svg'" class="outlook-icon ml-2" />
                    </div>
                </div>

                <div *ngFor="let incident of highestIncidents" class="item-link">
                    <strong>{{ incident.name }}</strong> - {{ incident.eventIndicators[0].name }}
                </div>

                <p class="mt-3">Based on our event level assessment of impact and risk as significant, the company has been assigned an overall
                    controversy assessment of
                    <strong>category {{ incidents.answerCategory }}</strong>
                </p>
            </div>
        </div>

        <div class="card w-50 right-card">
            <div *ngIf="chartData" class="card-body pb-0">
                <h5>Distribution of Controversy Assessments</h5>
                <div benchmarkChart [chartID]="'comparison_incidents'" [chartData]="chartData" [showRiskLevels]=true 
                [primaryName]="'Incidents'" [riskLevels]="categories">
                    <div id="comparison_incidents"></div>
                    <div id="benchmarkChartAxis"></div>
                </div>
            </div>
            <div class="card-body pt-2 secondary-text">
                <div class="chart-legend-block mr-2 ml-4" style="background-color: #888888"></div> Industry
                <div class="chart-legend-block mr-2 ml-4 bg-orange"></div> Company
            </div>
        </div>
    </div>

    <div class="mt-5">
        <div class="row card-body pb-1">
            <div class="col-5">
                <h6 class="ml-2">Event Indicator</h6>
            </div>
            <div class="col-4">
                <h6>Highest Controversy Level</h6>
            </div>
            <div class="col-3">
                <h6>Outlook</h6>
            </div>
        </div>
        <controversy-indicator *ngFor="let indicator of incidents.eventIndicators;let index = index" [companyId]="companyId" [indicatorIndex]="index"
            [indicator]="indicator" [noExpand]="indicator.answerCategory == 0"></controversy-indicator>
    </div>
</div>